<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4836166" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e1;</span>
                <div class="name">加载中</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ad;</span>
                <div class="name">数据集</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe647;</span>
                <div class="name">通过</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe648;</span>
                <div class="name">取消预约</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe646;</span>
                <div class="name">提交</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe61d;</span>
                <div class="name">朋友圈历史记录查看明细</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xeb70;</span>
                <div class="name">新增批注</div>
                <div class="code-name">&amp;#xeb70;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe617;</span>
                <div class="name">显示密码</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe614;</span>
                <div class="name">密码不显示</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecb5;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xecb5;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe610;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecb4;</span>
                <div class="name">prev</div>
                <div class="code-name">&amp;#xecb4;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe60c;</span>
                <div class="name">prev</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe641;</span>
                <div class="name">icon_页眉</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe645;</span>
                <div class="name">icon_页脚</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe649;</span>
                <div class="name">属性</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe616;</span>
                <div class="name">边框图标字体_外边框</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe670;</span>
                <div class="name">删除表格</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6eb;</span>
                <div class="name">合并单元格</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ec;</span>
                <div class="name">取消合并单元格</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ef;</span>
                <div class="name">删除列</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6f0;</span>
                <div class="name">删除行</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b9;</span>
                <div class="name">左侧插入列</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ba;</span>
                <div class="name">右侧插入列</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6bb;</span>
                <div class="name">下方插入行</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6bd;</span>
                <div class="name">上方插入行</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe642;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe688;</span>
                <div class="name">z_paragraph_normal</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe61b;</span>
                <div class="name">单选框_选中</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe60b;</span>
                <div class="name">多选框</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe644;</span>
                <div class="name">下拉框</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe66f;</span>
                <div class="name">单选框</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe60a;</span>
                <div class="name">关于我们</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe63e;</span>
                <div class="name">数据源管理-未选中</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe63a;</span>
                <div class="name">右边框</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecb1;</span>
                <div class="name">右边框</div>
                <div class="code-name">&amp;#xecb1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecb2;</span>
                <div class="name">右边框</div>
                <div class="code-name">&amp;#xecb2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecb3;</span>
                <div class="name">右边框</div>
                <div class="code-name">&amp;#xecb3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d6;</span>
                <div class="name">中边框</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecb0;</span>
                <div class="name">中边框</div>
                <div class="code-name">&amp;#xecb0;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe686;</span>
                <div class="name">列表</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe70f;</span>
                <div class="name">底对齐</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe711;</span>
                <div class="name">左对齐</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe714;</span>
                <div class="name">右对齐</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6dd;</span>
                <div class="name">顶部对齐</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe609;</span>
                <div class="name">插入_01Html</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe638;</span>
                <div class="name">vuesax-linear-html5</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe668;</span>
                <div class="name">预览</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe619;</span>
                <div class="name">清空</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe63f;</span>
                <div class="name">多行文本</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe60d;</span>
                <div class="name">上移</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe60e;</span>
                <div class="name">下移</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe67e;</span>
                <div class="name">代码</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe61a;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xeabd;</span>
                <div class="name">24gl-folder2</div>
                <div class="code-name">&amp;#xeabd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecaf;</span>
                <div class="name">upward-copy</div>
                <div class="code-name">&amp;#xecaf;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe615;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe601;</span>
                <div class="name">大纲-01</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe67c;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe69b;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe66e;</span>
                <div class="name">字体颜色</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6d9;</span>
                <div class="name">OrientLandscape</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6da;</span>
                <div class="name">OrientPortrait</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe684;</span>
                <div class="name">月经史</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe607;</span>
                <div class="name">pro-radio</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6fc;</span>
                <div class="name">字体减小</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6fd;</span>
                <div class="name">字体增大</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe713;</span>
                <div class="name">纸张大小</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe606;</span>
                <div class="name">页边距</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6bc;</span>
                <div class="name">形状</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe67d;</span>
                <div class="name">医学卫生 (2)</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe773;</span>
                <div class="name">特殊符号</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xec7a;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xec7a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe643;</span>
                <div class="name">粘贴</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe676;</span>
                <div class="name">导出PDF</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe605;</span>
                <div class="name">表单组件</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe69a;</span>
                <div class="name">页码-01</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe81d;</span>
                <div class="name">文档水印</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe623;</span>
                <div class="name">牙齿</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe600;</span>
                <div class="name">签名</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6ed;</span>
                <div class="name">签名</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe64f;</span>
                <div class="name">纸张方向</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6b1;</span>
                <div class="name">纸张方向</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe602;</span>
                <div class="name">zhixian</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe604;</span>
                <div class="name">矩形</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe622;</span>
                <div class="name">e_3三角形</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe608;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe640;</span>
                <div class="name">行高度_row-height</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe788;</span>
                <div class="name">文本替换</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7d2;</span>
                <div class="name">import</div>
                <div class="code-name">&amp;#xe7d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe71a;</span>
                <div class="name">胎心位置</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe776;</span>
                <div class="name">下拉-导出图片icon-normal</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe63c;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe63d;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe7b6;</span>
                <div class="name">分割线</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe66d;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xecae;</span>
                <div class="name">cut</div>
                <div class="code-name">&amp;#xecae;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe64e;</span>
                <div class="name">Calendar</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe658;</span>
                <div class="name">New_Post</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe659;</span>
                <div class="name">Printer</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe65d;</span>
                <div class="name">Search</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe65b;</span>
                <div class="name">Remove</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe664;</span>
                <div class="name">Add</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe603;</span>
                <div class="name">颜色</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe63b;</span>
                <div class="name">心电图</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6a9;</span>
                <div class="name">QRCode</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe639;</span>
                <div class="name">qrcode</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe613;</span>
                <div class="name">条码</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe719;</span>
                <div class="name">垂直分散对齐</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xea68;</span>
                <div class="name">24gl-fullScreenEnter</div>
                <div class="code-name">&amp;#xea68;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe705;</span>
                <div class="name">退出全屏</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe6e3;</span>
                <div class="name">全屏最大化</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe624;</span>
                <div class="name">撤销</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe625;</span>
                <div class="name">恢复</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe626;</span>
                <div class="name">粗体</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe627;</span>
                <div class="name">斜体</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe628;</span>
                <div class="name">删除线</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe629;</span>
                <div class="name">下划线</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe62a;</span>
                <div class="name">两端对齐</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe62b;</span>
                <div class="name">居中对齐</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe62c;</span>
                <div class="name">右对齐</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe62d;</span>
                <div class="name">左对齐</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe62e;</span>
                <div class="name">减少缩进</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe62f;</span>
                <div class="name">清除格式</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe630;</span>
                <div class="name">上标</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe631;</span>
                <div class="name">下标</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe632;</span>
                <div class="name">引用</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe633;</span>
                <div class="name">增加缩进</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe634;</span>
                <div class="name">编辑图片</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe635;</span>
                <div class="name">分页符</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe636;</span>
                <div class="name">表格</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon layui-icon">&#xe637;</span>
                <div class="name">背景色</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'layui-icon';
  src: url('iconfont.eot?t=1751447823552'); /* IE9 */
  src: url('iconfont.eot?t=1751447823552#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1751447823552') format('woff2'),
       url('iconfont.woff?t=1751447823552') format('woff'),
       url('iconfont.ttf?t=1751447823552') format('truetype'),
       url('iconfont.svg?t=1751447823552#layui-icon') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.layui-icon {
  font-family: "layui-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="layui-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"layui-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-loading-1"></span>
            <div class="name">
              加载中
            </div>
            <div class="code-name">.layui-icon-loading-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-database"></span>
            <div class="name">
              数据集
            </div>
            <div class="code-name">.layui-icon-database
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-pass"></span>
            <div class="name">
              通过
            </div>
            <div class="code-name">.layui-icon-pass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-cancel"></span>
            <div class="name">
              取消预约
            </div>
            <div class="code-name">.layui-icon-cancel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-commit"></span>
            <div class="name">
              提交
            </div>
            <div class="code-name">.layui-icon-commit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-history"></span>
            <div class="name">
              朋友圈历史记录查看明细
            </div>
            <div class="code-name">.layui-icon-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-comments"></span>
            <div class="name">
              新增批注
            </div>
            <div class="code-name">.layui-icon-comments
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-show"></span>
            <div class="name">
              显示密码
            </div>
            <div class="code-name">.layui-icon-show
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-hide"></span>
            <div class="name">
              密码不显示
            </div>
            <div class="code-name">.layui-icon-hide
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-next-m"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.layui-icon-next-m
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-prev-m"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.layui-icon-prev-m
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-next-y"></span>
            <div class="name">
              prev
            </div>
            <div class="code-name">.layui-icon-next-y
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-prev-y"></span>
            <div class="name">
              prev
            </div>
            <div class="code-name">.layui-icon-prev-y
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-header"></span>
            <div class="name">
              icon_页眉
            </div>
            <div class="code-name">.layui-icon-header
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-footer"></span>
            <div class="name">
              icon_页脚
            </div>
            <div class="code-name">.layui-icon-footer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-attribute"></span>
            <div class="name">
              属性
            </div>
            <div class="code-name">.layui-icon-attribute
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-border"></span>
            <div class="name">
              边框图标字体_外边框
            </div>
            <div class="code-name">.layui-icon-table-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-delete"></span>
            <div class="name">
              删除表格
            </div>
            <div class="code-name">.layui-icon-table-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-merge"></span>
            <div class="name">
              合并单元格
            </div>
            <div class="code-name">.layui-icon-table-merge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-split"></span>
            <div class="name">
              取消合并单元格
            </div>
            <div class="code-name">.layui-icon-table-split
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-delete-col"></span>
            <div class="name">
              删除列
            </div>
            <div class="code-name">.layui-icon-delete-col
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-delete-row"></span>
            <div class="name">
              删除行
            </div>
            <div class="code-name">.layui-icon-delete-row
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-left"></span>
            <div class="name">
              左侧插入列
            </div>
            <div class="code-name">.layui-icon-table-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-right"></span>
            <div class="name">
              右侧插入列
            </div>
            <div class="code-name">.layui-icon-table-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-below"></span>
            <div class="name">
              下方插入行
            </div>
            <div class="code-name">.layui-icon-table-below
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table-above"></span>
            <div class="name">
              上方插入行
            </div>
            <div class="code-name">.layui-icon-table-above
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.layui-icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paragraph"></span>
            <div class="name">
              z_paragraph_normal
            </div>
            <div class="code-name">.layui-icon-paragraph
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-radiobox"></span>
            <div class="name">
              单选框_选中
            </div>
            <div class="code-name">.layui-icon-radiobox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-checkbox"></span>
            <div class="name">
              多选框
            </div>
            <div class="code-name">.layui-icon-checkbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-combobox"></span>
            <div class="name">
              下拉框
            </div>
            <div class="code-name">.layui-icon-combobox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-radiobox1"></span>
            <div class="name">
              单选框
            </div>
            <div class="code-name">.layui-icon-radiobox1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-about"></span>
            <div class="name">
              关于我们
            </div>
            <div class="code-name">.layui-icon-about
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-data"></span>
            <div class="name">
              数据源管理-未选中
            </div>
            <div class="code-name">.layui-icon-data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-right-border"></span>
            <div class="name">
              右边框
            </div>
            <div class="code-name">.layui-icon-right-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-top-border"></span>
            <div class="name">
              右边框
            </div>
            <div class="code-name">.layui-icon-top-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-left-border"></span>
            <div class="name">
              右边框
            </div>
            <div class="code-name">.layui-icon-left-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-bottom-border"></span>
            <div class="name">
              右边框
            </div>
            <div class="code-name">.layui-icon-bottom-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-inside-border-h"></span>
            <div class="name">
              中边框
            </div>
            <div class="code-name">.layui-icon-inside-border-h
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-inside-border-v"></span>
            <div class="name">
              中边框
            </div>
            <div class="code-name">.layui-icon-inside-border-v
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-list"></span>
            <div class="name">
              列表
            </div>
            <div class="code-name">.layui-icon-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-aline-bottom"></span>
            <div class="name">
              底对齐
            </div>
            <div class="code-name">.layui-icon-aline-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-aline-left"></span>
            <div class="name">
              左对齐
            </div>
            <div class="code-name">.layui-icon-aline-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-aline-right"></span>
            <div class="name">
              右对齐
            </div>
            <div class="code-name">.layui-icon-aline-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-aline-top"></span>
            <div class="name">
              顶部对齐
            </div>
            <div class="code-name">.layui-icon-aline-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-web"></span>
            <div class="name">
              插入_01Html
            </div>
            <div class="code-name">.layui-icon-web
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-html"></span>
            <div class="name">
              vuesax-linear-html5
            </div>
            <div class="code-name">.layui-icon-html
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-preview"></span>
            <div class="name">
              预览
            </div>
            <div class="code-name">.layui-icon-preview
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-qingkong1"></span>
            <div class="name">
              清空
            </div>
            <div class="code-name">.layui-icon-qingkong1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-text"></span>
            <div class="name">
              多行文本
            </div>
            <div class="code-name">.layui-icon-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-moveup"></span>
            <div class="name">
              上移
            </div>
            <div class="code-name">.layui-icon-moveup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-movedown"></span>
            <div class="name">
              下移
            </div>
            <div class="code-name">.layui-icon-movedown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-code2"></span>
            <div class="name">
              代码
            </div>
            <div class="code-name">.layui-icon-code2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.layui-icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-folder"></span>
            <div class="name">
              24gl-folder2
            </div>
            <div class="code-name">.layui-icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-up"></span>
            <div class="name">
              upward-copy
            </div>
            <div class="code-name">.layui-icon-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.layui-icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-outline"></span>
            <div class="name">
              大纲-01
            </div>
            <div class="code-name">.layui-icon-outline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-set"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.layui-icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.layui-icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-font-color"></span>
            <div class="name">
              字体颜色
            </div>
            <div class="code-name">.layui-icon-font-color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paper-landscape"></span>
            <div class="name">
              OrientLandscape
            </div>
            <div class="code-name">.layui-icon-paper-landscape
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paper-portrait"></span>
            <div class="name">
              OrientPortrait
            </div>
            <div class="code-name">.layui-icon-paper-portrait
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-menstrual"></span>
            <div class="name">
              月经史
            </div>
            <div class="code-name">.layui-icon-menstrual
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-shape-ellipse"></span>
            <div class="name">
              pro-radio
            </div>
            <div class="code-name">.layui-icon-shape-ellipse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-font-decrease"></span>
            <div class="name">
              字体减小
            </div>
            <div class="code-name">.layui-icon-font-decrease
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-font-increase"></span>
            <div class="name">
              字体增大
            </div>
            <div class="code-name">.layui-icon-font-increase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paper-size"></span>
            <div class="name">
              纸张大小
            </div>
            <div class="code-name">.layui-icon-paper-size
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paper-margin"></span>
            <div class="name">
              页边距
            </div>
            <div class="code-name">.layui-icon-paper-margin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-shape"></span>
            <div class="name">
              形状
            </div>
            <div class="code-name">.layui-icon-shape
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-medicine"></span>
            <div class="name">
              医学卫生 (2)
            </div>
            <div class="code-name">.layui-icon-medicine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-omega"></span>
            <div class="name">
              特殊符号
            </div>
            <div class="code-name">.layui-icon-omega
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-copy"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.layui-icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paste"></span>
            <div class="name">
              粘贴
            </div>
            <div class="code-name">.layui-icon-paste
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-export-pdf"></span>
            <div class="name">
              导出PDF
            </div>
            <div class="code-name">.layui-icon-export-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-form"></span>
            <div class="name">
              表单组件
            </div>
            <div class="code-name">.layui-icon-form
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-page-num"></span>
            <div class="name">
              页码-01
            </div>
            <div class="code-name">.layui-icon-page-num
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-watermark"></span>
            <div class="name">
              文档水印
            </div>
            <div class="code-name">.layui-icon-watermark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-tooth"></span>
            <div class="name">
              牙齿
            </div>
            <div class="code-name">.layui-icon-tooth
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-signature"></span>
            <div class="name">
              签名
            </div>
            <div class="code-name">.layui-icon-signature
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-signature1"></span>
            <div class="name">
              签名
            </div>
            <div class="code-name">.layui-icon-signature1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paper-orientation"></span>
            <div class="name">
              纸张方向
            </div>
            <div class="code-name">.layui-icon-paper-orientation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-paper-orientation2"></span>
            <div class="name">
              纸张方向
            </div>
            <div class="code-name">.layui-icon-paper-orientation2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-shape-line"></span>
            <div class="name">
              zhixian
            </div>
            <div class="code-name">.layui-icon-shape-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-shape-rect"></span>
            <div class="name">
              矩形
            </div>
            <div class="code-name">.layui-icon-shape-rect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-shape-triangle"></span>
            <div class="name">
              e_3三角形
            </div>
            <div class="code-name">.layui-icon-shape-triangle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.layui-icon-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-line-spacing"></span>
            <div class="name">
              行高度_row-height
            </div>
            <div class="code-name">.layui-icon-line-spacing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-replace"></span>
            <div class="name">
              文本替换
            </div>
            <div class="code-name">.layui-icon-replace
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-import"></span>
            <div class="name">
              import
            </div>
            <div class="code-name">.layui-icon-import
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-fetalheart"></span>
            <div class="name">
              胎心位置
            </div>
            <div class="code-name">.layui-icon-fetalheart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-export-image"></span>
            <div class="name">
              下拉-导出图片icon-normal
            </div>
            <div class="code-name">.layui-icon-export-image
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-download"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.layui-icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-download2"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.layui-icon-download2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-divider"></span>
            <div class="name">
              分割线
            </div>
            <div class="code-name">.layui-icon-divider
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.layui-icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-cut"></span>
            <div class="name">
              cut
            </div>
            <div class="code-name">.layui-icon-cut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-calendar"></span>
            <div class="name">
              Calendar
            </div>
            <div class="code-name">.layui-icon-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-edit"></span>
            <div class="name">
              New_Post
            </div>
            <div class="code-name">.layui-icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-printer"></span>
            <div class="name">
              Printer
            </div>
            <div class="code-name">.layui-icon-printer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-find"></span>
            <div class="name">
              Search
            </div>
            <div class="code-name">.layui-icon-find
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-remove"></span>
            <div class="name">
              Remove
            </div>
            <div class="code-name">.layui-icon-remove
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-add"></span>
            <div class="name">
              Add
            </div>
            <div class="code-name">.layui-icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-color"></span>
            <div class="name">
              颜色
            </div>
            <div class="code-name">.layui-icon-color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-cardiac"></span>
            <div class="name">
              心电图
            </div>
            <div class="code-name">.layui-icon-cardiac
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-qrcode"></span>
            <div class="name">
              QRCode
            </div>
            <div class="code-name">.layui-icon-qrcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-code"></span>
            <div class="name">
              qrcode
            </div>
            <div class="code-name">.layui-icon-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-barcode"></span>
            <div class="name">
              条码
            </div>
            <div class="code-name">.layui-icon-barcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-align-dispersed"></span>
            <div class="name">
              垂直分散对齐
            </div>
            <div class="code-name">.layui-icon-align-dispersed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-scale"></span>
            <div class="name">
              24gl-fullScreenEnter
            </div>
            <div class="code-name">.layui-icon-scale
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-full-exit"></span>
            <div class="name">
              退出全屏
            </div>
            <div class="code-name">.layui-icon-full-exit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-full"></span>
            <div class="name">
              全屏最大化
            </div>
            <div class="code-name">.layui-icon-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-undo"></span>
            <div class="name">
              撤销
            </div>
            <div class="code-name">.layui-icon-undo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-redo"></span>
            <div class="name">
              恢复
            </div>
            <div class="code-name">.layui-icon-redo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-bold"></span>
            <div class="name">
              粗体
            </div>
            <div class="code-name">.layui-icon-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-italic"></span>
            <div class="name">
              斜体
            </div>
            <div class="code-name">.layui-icon-italic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-strikethrough"></span>
            <div class="name">
              删除线
            </div>
            <div class="code-name">.layui-icon-strikethrough
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-underline"></span>
            <div class="name">
              下划线
            </div>
            <div class="code-name">.layui-icon-underline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-align-both"></span>
            <div class="name">
              两端对齐
            </div>
            <div class="code-name">.layui-icon-align-both
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-align-center"></span>
            <div class="name">
              居中对齐
            </div>
            <div class="code-name">.layui-icon-align-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-align-right"></span>
            <div class="name">
              右对齐
            </div>
            <div class="code-name">.layui-icon-align-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-align-left"></span>
            <div class="name">
              左对齐
            </div>
            <div class="code-name">.layui-icon-align-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-outdent"></span>
            <div class="name">
              减少缩进
            </div>
            <div class="code-name">.layui-icon-outdent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-clear"></span>
            <div class="name">
              清除格式
            </div>
            <div class="code-name">.layui-icon-clear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-superscript"></span>
            <div class="name">
              上标
            </div>
            <div class="code-name">.layui-icon-superscript
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-subscript"></span>
            <div class="name">
              下标
            </div>
            <div class="code-name">.layui-icon-subscript
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-quote"></span>
            <div class="name">
              引用
            </div>
            <div class="code-name">.layui-icon-quote
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-indent"></span>
            <div class="name">
              增加缩进
            </div>
            <div class="code-name">.layui-icon-indent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-picture"></span>
            <div class="name">
              编辑图片
            </div>
            <div class="code-name">.layui-icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-page-break"></span>
            <div class="name">
              分页符
            </div>
            <div class="code-name">.layui-icon-page-break
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-table"></span>
            <div class="name">
              表格
            </div>
            <div class="code-name">.layui-icon-table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon layui-icon layui-icon-background"></span>
            <div class="name">
              背景色
            </div>
            <div class="code-name">.layui-icon-background
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="layui-icon layui-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            layui-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-loading-1"></use>
                </svg>
                <div class="name">加载中</div>
                <div class="code-name">#layui-icon-loading-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-database"></use>
                </svg>
                <div class="name">数据集</div>
                <div class="code-name">#layui-icon-database</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-pass"></use>
                </svg>
                <div class="name">通过</div>
                <div class="code-name">#layui-icon-pass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-cancel"></use>
                </svg>
                <div class="name">取消预约</div>
                <div class="code-name">#layui-icon-cancel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-commit"></use>
                </svg>
                <div class="name">提交</div>
                <div class="code-name">#layui-icon-commit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-history"></use>
                </svg>
                <div class="name">朋友圈历史记录查看明细</div>
                <div class="code-name">#layui-icon-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-comments"></use>
                </svg>
                <div class="name">新增批注</div>
                <div class="code-name">#layui-icon-comments</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-show"></use>
                </svg>
                <div class="name">显示密码</div>
                <div class="code-name">#layui-icon-show</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-hide"></use>
                </svg>
                <div class="name">密码不显示</div>
                <div class="code-name">#layui-icon-hide</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-next-m"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#layui-icon-next-m</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-prev-m"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#layui-icon-prev-m</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-next-y"></use>
                </svg>
                <div class="name">prev</div>
                <div class="code-name">#layui-icon-next-y</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-prev-y"></use>
                </svg>
                <div class="name">prev</div>
                <div class="code-name">#layui-icon-prev-y</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-header"></use>
                </svg>
                <div class="name">icon_页眉</div>
                <div class="code-name">#layui-icon-header</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-footer"></use>
                </svg>
                <div class="name">icon_页脚</div>
                <div class="code-name">#layui-icon-footer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-attribute"></use>
                </svg>
                <div class="name">属性</div>
                <div class="code-name">#layui-icon-attribute</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-border"></use>
                </svg>
                <div class="name">边框图标字体_外边框</div>
                <div class="code-name">#layui-icon-table-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-delete"></use>
                </svg>
                <div class="name">删除表格</div>
                <div class="code-name">#layui-icon-table-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-merge"></use>
                </svg>
                <div class="name">合并单元格</div>
                <div class="code-name">#layui-icon-table-merge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-split"></use>
                </svg>
                <div class="name">取消合并单元格</div>
                <div class="code-name">#layui-icon-table-split</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-delete-col"></use>
                </svg>
                <div class="name">删除列</div>
                <div class="code-name">#layui-icon-delete-col</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-delete-row"></use>
                </svg>
                <div class="name">删除行</div>
                <div class="code-name">#layui-icon-delete-row</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-left"></use>
                </svg>
                <div class="name">左侧插入列</div>
                <div class="code-name">#layui-icon-table-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-right"></use>
                </svg>
                <div class="name">右侧插入列</div>
                <div class="code-name">#layui-icon-table-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-below"></use>
                </svg>
                <div class="name">下方插入行</div>
                <div class="code-name">#layui-icon-table-below</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table-above"></use>
                </svg>
                <div class="name">上方插入行</div>
                <div class="code-name">#layui-icon-table-above</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#layui-icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paragraph"></use>
                </svg>
                <div class="name">z_paragraph_normal</div>
                <div class="code-name">#layui-icon-paragraph</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-radiobox"></use>
                </svg>
                <div class="name">单选框_选中</div>
                <div class="code-name">#layui-icon-radiobox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-checkbox"></use>
                </svg>
                <div class="name">多选框</div>
                <div class="code-name">#layui-icon-checkbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-combobox"></use>
                </svg>
                <div class="name">下拉框</div>
                <div class="code-name">#layui-icon-combobox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-radiobox1"></use>
                </svg>
                <div class="name">单选框</div>
                <div class="code-name">#layui-icon-radiobox1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-about"></use>
                </svg>
                <div class="name">关于我们</div>
                <div class="code-name">#layui-icon-about</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-data"></use>
                </svg>
                <div class="name">数据源管理-未选中</div>
                <div class="code-name">#layui-icon-data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-right-border"></use>
                </svg>
                <div class="name">右边框</div>
                <div class="code-name">#layui-icon-right-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-top-border"></use>
                </svg>
                <div class="name">右边框</div>
                <div class="code-name">#layui-icon-top-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-left-border"></use>
                </svg>
                <div class="name">右边框</div>
                <div class="code-name">#layui-icon-left-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-bottom-border"></use>
                </svg>
                <div class="name">右边框</div>
                <div class="code-name">#layui-icon-bottom-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-inside-border-h"></use>
                </svg>
                <div class="name">中边框</div>
                <div class="code-name">#layui-icon-inside-border-h</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-inside-border-v"></use>
                </svg>
                <div class="name">中边框</div>
                <div class="code-name">#layui-icon-inside-border-v</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-list"></use>
                </svg>
                <div class="name">列表</div>
                <div class="code-name">#layui-icon-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-aline-bottom"></use>
                </svg>
                <div class="name">底对齐</div>
                <div class="code-name">#layui-icon-aline-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-aline-left"></use>
                </svg>
                <div class="name">左对齐</div>
                <div class="code-name">#layui-icon-aline-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-aline-right"></use>
                </svg>
                <div class="name">右对齐</div>
                <div class="code-name">#layui-icon-aline-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-aline-top"></use>
                </svg>
                <div class="name">顶部对齐</div>
                <div class="code-name">#layui-icon-aline-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-web"></use>
                </svg>
                <div class="name">插入_01Html</div>
                <div class="code-name">#layui-icon-web</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-html"></use>
                </svg>
                <div class="name">vuesax-linear-html5</div>
                <div class="code-name">#layui-icon-html</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-preview"></use>
                </svg>
                <div class="name">预览</div>
                <div class="code-name">#layui-icon-preview</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-qingkong1"></use>
                </svg>
                <div class="name">清空</div>
                <div class="code-name">#layui-icon-qingkong1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-text"></use>
                </svg>
                <div class="name">多行文本</div>
                <div class="code-name">#layui-icon-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-moveup"></use>
                </svg>
                <div class="name">上移</div>
                <div class="code-name">#layui-icon-moveup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-movedown"></use>
                </svg>
                <div class="name">下移</div>
                <div class="code-name">#layui-icon-movedown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-code2"></use>
                </svg>
                <div class="name">代码</div>
                <div class="code-name">#layui-icon-code2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#layui-icon-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-folder"></use>
                </svg>
                <div class="name">24gl-folder2</div>
                <div class="code-name">#layui-icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-up"></use>
                </svg>
                <div class="name">upward-copy</div>
                <div class="code-name">#layui-icon-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#layui-icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-outline"></use>
                </svg>
                <div class="name">大纲-01</div>
                <div class="code-name">#layui-icon-outline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-set"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#layui-icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#layui-icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-font-color"></use>
                </svg>
                <div class="name">字体颜色</div>
                <div class="code-name">#layui-icon-font-color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paper-landscape"></use>
                </svg>
                <div class="name">OrientLandscape</div>
                <div class="code-name">#layui-icon-paper-landscape</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paper-portrait"></use>
                </svg>
                <div class="name">OrientPortrait</div>
                <div class="code-name">#layui-icon-paper-portrait</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-menstrual"></use>
                </svg>
                <div class="name">月经史</div>
                <div class="code-name">#layui-icon-menstrual</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-shape-ellipse"></use>
                </svg>
                <div class="name">pro-radio</div>
                <div class="code-name">#layui-icon-shape-ellipse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-font-decrease"></use>
                </svg>
                <div class="name">字体减小</div>
                <div class="code-name">#layui-icon-font-decrease</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-font-increase"></use>
                </svg>
                <div class="name">字体增大</div>
                <div class="code-name">#layui-icon-font-increase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paper-size"></use>
                </svg>
                <div class="name">纸张大小</div>
                <div class="code-name">#layui-icon-paper-size</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paper-margin"></use>
                </svg>
                <div class="name">页边距</div>
                <div class="code-name">#layui-icon-paper-margin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-shape"></use>
                </svg>
                <div class="name">形状</div>
                <div class="code-name">#layui-icon-shape</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-medicine"></use>
                </svg>
                <div class="name">医学卫生 (2)</div>
                <div class="code-name">#layui-icon-medicine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-omega"></use>
                </svg>
                <div class="name">特殊符号</div>
                <div class="code-name">#layui-icon-omega</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-copy"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#layui-icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paste"></use>
                </svg>
                <div class="name">粘贴</div>
                <div class="code-name">#layui-icon-paste</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-export-pdf"></use>
                </svg>
                <div class="name">导出PDF</div>
                <div class="code-name">#layui-icon-export-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-form"></use>
                </svg>
                <div class="name">表单组件</div>
                <div class="code-name">#layui-icon-form</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-page-num"></use>
                </svg>
                <div class="name">页码-01</div>
                <div class="code-name">#layui-icon-page-num</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-watermark"></use>
                </svg>
                <div class="name">文档水印</div>
                <div class="code-name">#layui-icon-watermark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-tooth"></use>
                </svg>
                <div class="name">牙齿</div>
                <div class="code-name">#layui-icon-tooth</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-signature"></use>
                </svg>
                <div class="name">签名</div>
                <div class="code-name">#layui-icon-signature</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-signature1"></use>
                </svg>
                <div class="name">签名</div>
                <div class="code-name">#layui-icon-signature1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paper-orientation"></use>
                </svg>
                <div class="name">纸张方向</div>
                <div class="code-name">#layui-icon-paper-orientation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-paper-orientation2"></use>
                </svg>
                <div class="name">纸张方向</div>
                <div class="code-name">#layui-icon-paper-orientation2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-shape-line"></use>
                </svg>
                <div class="name">zhixian</div>
                <div class="code-name">#layui-icon-shape-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-shape-rect"></use>
                </svg>
                <div class="name">矩形</div>
                <div class="code-name">#layui-icon-shape-rect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-shape-triangle"></use>
                </svg>
                <div class="name">e_3三角形</div>
                <div class="code-name">#layui-icon-shape-triangle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#layui-icon-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-line-spacing"></use>
                </svg>
                <div class="name">行高度_row-height</div>
                <div class="code-name">#layui-icon-line-spacing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-replace"></use>
                </svg>
                <div class="name">文本替换</div>
                <div class="code-name">#layui-icon-replace</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-import"></use>
                </svg>
                <div class="name">import</div>
                <div class="code-name">#layui-icon-import</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-fetalheart"></use>
                </svg>
                <div class="name">胎心位置</div>
                <div class="code-name">#layui-icon-fetalheart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-export-image"></use>
                </svg>
                <div class="name">下拉-导出图片icon-normal</div>
                <div class="code-name">#layui-icon-export-image</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-download"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#layui-icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-download2"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#layui-icon-download2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-divider"></use>
                </svg>
                <div class="name">分割线</div>
                <div class="code-name">#layui-icon-divider</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#layui-icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-cut"></use>
                </svg>
                <div class="name">cut</div>
                <div class="code-name">#layui-icon-cut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-calendar"></use>
                </svg>
                <div class="name">Calendar</div>
                <div class="code-name">#layui-icon-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-edit"></use>
                </svg>
                <div class="name">New_Post</div>
                <div class="code-name">#layui-icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-printer"></use>
                </svg>
                <div class="name">Printer</div>
                <div class="code-name">#layui-icon-printer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-find"></use>
                </svg>
                <div class="name">Search</div>
                <div class="code-name">#layui-icon-find</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-remove"></use>
                </svg>
                <div class="name">Remove</div>
                <div class="code-name">#layui-icon-remove</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-add"></use>
                </svg>
                <div class="name">Add</div>
                <div class="code-name">#layui-icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-color"></use>
                </svg>
                <div class="name">颜色</div>
                <div class="code-name">#layui-icon-color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-cardiac"></use>
                </svg>
                <div class="name">心电图</div>
                <div class="code-name">#layui-icon-cardiac</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-qrcode"></use>
                </svg>
                <div class="name">QRCode</div>
                <div class="code-name">#layui-icon-qrcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-code"></use>
                </svg>
                <div class="name">qrcode</div>
                <div class="code-name">#layui-icon-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-barcode"></use>
                </svg>
                <div class="name">条码</div>
                <div class="code-name">#layui-icon-barcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-align-dispersed"></use>
                </svg>
                <div class="name">垂直分散对齐</div>
                <div class="code-name">#layui-icon-align-dispersed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-scale"></use>
                </svg>
                <div class="name">24gl-fullScreenEnter</div>
                <div class="code-name">#layui-icon-scale</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-full-exit"></use>
                </svg>
                <div class="name">退出全屏</div>
                <div class="code-name">#layui-icon-full-exit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-full"></use>
                </svg>
                <div class="name">全屏最大化</div>
                <div class="code-name">#layui-icon-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-undo"></use>
                </svg>
                <div class="name">撤销</div>
                <div class="code-name">#layui-icon-undo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-redo"></use>
                </svg>
                <div class="name">恢复</div>
                <div class="code-name">#layui-icon-redo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-bold"></use>
                </svg>
                <div class="name">粗体</div>
                <div class="code-name">#layui-icon-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-italic"></use>
                </svg>
                <div class="name">斜体</div>
                <div class="code-name">#layui-icon-italic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-strikethrough"></use>
                </svg>
                <div class="name">删除线</div>
                <div class="code-name">#layui-icon-strikethrough</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-underline"></use>
                </svg>
                <div class="name">下划线</div>
                <div class="code-name">#layui-icon-underline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-align-both"></use>
                </svg>
                <div class="name">两端对齐</div>
                <div class="code-name">#layui-icon-align-both</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-align-center"></use>
                </svg>
                <div class="name">居中对齐</div>
                <div class="code-name">#layui-icon-align-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-align-right"></use>
                </svg>
                <div class="name">右对齐</div>
                <div class="code-name">#layui-icon-align-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-align-left"></use>
                </svg>
                <div class="name">左对齐</div>
                <div class="code-name">#layui-icon-align-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-outdent"></use>
                </svg>
                <div class="name">减少缩进</div>
                <div class="code-name">#layui-icon-outdent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-clear"></use>
                </svg>
                <div class="name">清除格式</div>
                <div class="code-name">#layui-icon-clear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-superscript"></use>
                </svg>
                <div class="name">上标</div>
                <div class="code-name">#layui-icon-superscript</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-subscript"></use>
                </svg>
                <div class="name">下标</div>
                <div class="code-name">#layui-icon-subscript</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-quote"></use>
                </svg>
                <div class="name">引用</div>
                <div class="code-name">#layui-icon-quote</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-indent"></use>
                </svg>
                <div class="name">增加缩进</div>
                <div class="code-name">#layui-icon-indent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-picture"></use>
                </svg>
                <div class="name">编辑图片</div>
                <div class="code-name">#layui-icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-page-break"></use>
                </svg>
                <div class="name">分页符</div>
                <div class="code-name">#layui-icon-page-break</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-table"></use>
                </svg>
                <div class="name">表格</div>
                <div class="code-name">#layui-icon-table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#layui-icon-background"></use>
                </svg>
                <div class="name">背景色</div>
                <div class="code-name">#layui-icon-background</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
